import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {PropsType} from './DetailWhat';
import dayjs from 'dayjs';
interface WhenPropsType extends PropsType {
  beginTime?: string;
  endTime?: string;
}
export default function DetailWhen(props: WhenPropsType) {
  const beginDate = dayjs(props?.beginTime).format('DD MMM YYYY');
  const beginTime = dayjs(props?.beginTime).format('h:mm');
  const beginTimeSuffix = dayjs(props?.beginTime).format('a');
  const endDate = dayjs(props?.beginTime).format('DD MMM YYYY');
  return (
    <View style={props.style}>
      <View style={headerStyles.headerContainer}>
        <View style={headerStyles.headerLineVer}></View>
        <Text style={headerStyles.headerText}>When</Text>
      </View>
      <View style={timeStyles.timeContainer}>
        <View style={timeStyles.left}>
          <View>
            <Text style={timeStyles.date}>{beginDate}</Text>

            <Text style={timeStyles.time}>
              {beginTime}{' '}
              <Text style={timeStyles.timeSub}>{beginTimeSuffix}</Text>
            </Text>
          </View>
        </View>
        <View style={timeStyles.splitLine}></View>
        <View style={timeStyles.right}>
          <Text style={timeStyles.date}>{endDate}</Text>
        </View>
      </View>
    </View>
  );
}
const headerStyles = StyleSheet.create({
  headerContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  headerLineVer: {
    backgroundColor: '#8560A9',
    width: 4,
    height: 18,
  },
  headerText: {
    paddingLeft: 4,
    color: '#8560A9',
    fontSize: 16,
    fontWeight: '500',
  },
});
const timeStyles = StyleSheet.create({
  timeContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  splitLine: {
    width: 2,
    height: '100%',
    backgroundColor: '#e8e8e8',
  },
  left: {
    paddingRight: 20,
  },
  right: {
    paddingLeft: 20,
  },
  date: {
    fontSize: 16,
    color: '#67616D',
  },
  time: {
    fontSize: 32,
    color: '#AECB4F',
  },
  timeSub: {
    fontSize: 16,
  },
});
